<template>
	<el-scrollbar :height="isTagsview ? `calc(100vh - 154px)` : `calc(100vh - 120px)`">
		<div>
			<zh-form ref="formRef" style="width: 96%" :md="12" :lg="12" :xl="12" :model="form" :rules="rules">
				<zh-form-input label="路由标识" prop="routerKey" v-model="form.routerKey"></zh-form-input>
				<zh-form-item label="图标" prop="icon">
					<iconSelector placeholder="请输入菜单图标" v-model="form.icon" type="all" />
				</zh-form-item>
				<zh-form-input label="路由名称" prop="routerName" v-model="form.routerName" placeholder="需和前端定义的名称一致"></zh-form-input>
				<zh-form-input label="菜单标题" prop="title" v-model="form.title"></zh-form-input>
				<zh-form-color-picker prop="color" label="图标颜色" placeholder="请选择" v-model="form.color"></zh-form-color-picker>
				<zh-form-color-picker prop="bgColor" label="背景颜色" placeholder="请选择" v-model="form.bgColor"></zh-form-color-picker>
				<zh-form-input label="图标图片url" prop="iconImgUrl" v-model="form.iconImgUrl"></zh-form-input>
				<zh-form-input label="背景图片url" prop="bgUrl" v-model="form.bgUrl"></zh-form-input>
				<zh-form-input label="上级菜单ID" :disabled="true" prop="parentId" v-model="form.parentId"></zh-form-input>
				<zh-form-input label="上级菜单名称" :disabled="true" prop="parentTitle" v-model="form.parentTitle"></zh-form-input>
				<zh-form-select label="节点类型" prop="nodeType" v-model="form.nodeType" :options="dictData.nodeType"></zh-form-select>
				<zh-form-select
					label="操作期"
					placeholder="请选择业务期"
					prop="operating"
					v-model="form.operating"
					:options="dictData.operating"
				></zh-form-select>
				<zh-form-choose-org prop="orgId" label="所属组织" v-model="form.orgId"></zh-form-choose-org>
				<zh-form-cascader
					prop="areaCode"
					label="行政区划"
					placeholder="请选择"
					:props="{ checkStrictly: true, emitPath: false }"
					v-model="form.areaCode"
					:options="areaCodeSelectTreeData"
				></zh-form-cascader>
				<zh-form-select
					prop="appId"
					:lazy="true"
					label="所属应用"
					v-model="form.appId"
					:disabled="true"
					:fieldNames="{ label: 'appName', value: 'appId' }"
					funcCode="application0012"
					searchField="appName"
				></zh-form-select>
				<zh-form-input label="服务事项编码" prop="serviceCode" v-model="form.serviceCode"></zh-form-input>
				<zh-form-input label="服务事项名称" prop="serviceName" v-model="form.serviceName"></zh-form-input>
				<zh-form-select
					label="来源类型"
					placeholder="请选择路由来源"
					prop="sourceType"
					v-model="form.sourceType"
					:options="dictData.routerSourceType"
				></zh-form-select>
				<zh-form-number label="排序" :disabled="true" placeholder="拖拽节点自动排序" prop="orderNo" v-model="form.orderNo"></zh-form-number>
				<zh-form-input :span="24" label="模板/路径" prop="component" v-model="form.component"></zh-form-input>
				<zh-form-input :span="24" label="重定向地址" prop="redirect" v-model="form.redirect"></zh-form-input>
				<zh-form-input :span="24" :disabled="disabledParams.otherUrl" label="外部链接地址" prop="otherUrl" v-model="form.otherUrl"></zh-form-input>
				<zh-form-radio
					@change="isLinkChange"
					:disabled="disabledParams.isLink"
					:sm="12"
					:md="8"
					:lg="8"
					:xl="8"
					label="是否外链"
					prop="isLink"
					v-model="form.isLink"
					:options="dictFlag"
				></zh-form-radio>
				<zh-form-radio
					@change="isIframeChange"
					:disabled="disabledParams.isIframe"
					:sm="12"
					:lg="8"
					:xl="8"
					label="是否内嵌"
					prop="isIframe"
					v-model="form.isIframe"
					:options="dictFlag"
				></zh-form-radio>
				<zh-form-radio :sm="12" :lg="8" :xl="8" label="是否隐藏" prop="hidden" v-model="form.hidden" :options="dictFlag"></zh-form-radio>
				<zh-form-radio :sm="12" :lg="8" :xl="8" label="页面缓存" prop="keepAlive" v-model="form.keepAlive" :options="dictKeepAlive"></zh-form-radio>
				<zh-form-radio
					:sm="12"
					:lg="8"
					:xl="8"
					label="是否脱离框架"
					prop="hideChildrenInMenu"
					v-model="form.hideChildrenInMenu"
					:options="dictFlag"
				></zh-form-radio>
				<zh-form-radio
					:sm="12"
					:lg="8"
					:xl="8"
					label="面包屑隐藏"
					prop="hiddenBreadcrumb"
					v-model="form.hiddenBreadcrumb"
					:options="dictFlag"
				></zh-form-radio>
				<zh-form-radio
					:sm="12"
					:lg="8"
					:xl="8"
					label="是否固定"
					prop="hiddenHeaderContent"
					v-model="form.hiddenHeaderContent"
					:options="dictFlag"
				></zh-form-radio>
				<zh-form-radio :sm="12" :lg="8" :xl="8" label="是否携带token" prop="tokenFlag" v-model="form.tokenFlag" :options="dictFlag"></zh-form-radio>
				<zh-form-radio :sm="12" :lg="8" :xl="8" label="是否优先显示" prop="firstShow" v-model="form.firstShow" :options="dictFlag"></zh-form-radio>
				<zh-form-radio :sm="12" :lg="8" :xl="8" label="是否公共" prop="publicFlag" v-model="form.publicFlag" :options="dictFlag"></zh-form-radio>
				<zh-form-radio :sm="12" :lg="8" :xl="8" label="是否禁用" prop="disabled" v-model="form.disabled" :options="dictFlag"></zh-form-radio>
				<zh-form-radio :sm="12" :lg="8" :xl="8" label="是否记日志" prop="logFlag" v-model="form.logFlag" :options="dictFlag"></zh-form-radio>
				<zh-form-radio
					:sm="12"
					:lg="8"
					:xl="8"
					label="是否可回退"
					prop="rollbackFlag"
					v-model="form.rollbackFlag"
					:options="dictFlag"
				></zh-form-radio>
				<zh-form-radio :sm="12" :lg="8" :xl="8" label="是否开启流程" prop="auditFlag" v-model="form.auditFlag" :options="dictFlag"></zh-form-radio>

				<zh-form-input
					type="textarea"
					:span="24"
					label="Query参数"
					prop="param1"
					v-model="form.param1"
					placeholder="请用输入json格式的参数"
				></zh-form-input>
				<zh-form-input
					type="textarea"
					:span="24"
					label="菜单其他参数"
					prop="param3"
					v-model="form.param3"
					placeholder="请用输入json格式的参数,比如颜色设置等"
				></zh-form-input>
				<zh-form-input
					:span="24"
					label="高亮路由地址"
					prop="param2"
					v-model="form.param2"
					placeholder="高亮左侧菜单的路由地址，比如打开详情页需要高亮列表页的菜单"
				></zh-form-input>
				<zh-form-input type="textarea" :span="24" label="自定义参数" prop="param4" v-model="form.param4" placeholder="自定义参数"></zh-form-input>
				<zh-form-input
					type="textarea"
					:span="24"
					label="摘要"
					prop="digest"
					v-model="form.digest"
					placeholder="json格式，用于记录操作日志中的摘要信息"
				></zh-form-input>
				<zh-form-input
					type="textarea"
					:span="24"
					label="可忽略跨业务"
					prop="ignoreRbOp"
					v-model="form.ignoreRbOp"
					placeholder="忽略回退跨业务的业务类型,多用用英文逗号隔开"
				></zh-form-input>
				<zh-form-input
					type="textarea"
					:span="24"
					label="同时待办控制"
					prop="notDoingOp"
					v-model="form.notDoingOp"
					placeholder="同一数据类型业务不允许一起待办的业务类型，多个用英文逗号隔开，为空则只校验同业务类型"
				></zh-form-input>
				<zh-form-input type="textarea" :span="24" label="备注" prop="remarks" v-model="form.remarks"></zh-form-input>
			</zh-form>
		</div>
	</el-scrollbar>
</template>
<script lang="ts" setup name="routerInfo">
const formRef = ref();
const { isTagsview } = storeToRefs($store.theme);
//----------------定义接收参数-------------------------------
const prop = defineProps({
	routerInfo: Object,
});
let initForm = {
	routerId: '',
	routerKey: '',
	routerName: '',
	title: '',
	parentId: '',
	parentTitle: '',
	icon: '',
	redirect: '',
	otherUrl: '',
	nodeType: '1',
	component: '',
	isLink: '0',
	isIframe: '0',
	keepAlive: '1',
	hidden: '0',
	hideChildrenInMenu: '0',
	hiddenBreadcrumb: '0',
	hiddenHeaderContent: '0',
	publicFlag: '0',
	disabled: '0',
	rollbackFlag: '0',
	logFlag: '1',
	auditFlag: '0',
	param1: '',
	param2: '',
	param3: '',
	param4: '',
	digest: '',
	remarks: '',
	operating: '',
	orderNo: undefined,
	rate: undefined,
	appId: '',
	orgId: '',
	sourceType: '1',
};
let form = reactive({
	routerId: '',
	routerKey: '',
	routerName: '',
	title: '',
	parentId: '',
	parentTitle: '',
	icon: '',
	redirect: '',
	otherUrl: '',
	nodeType: '1',
	component: '',
	isLink: '0',
	isIframe: '0',
	keepAlive: '0',
	hidden: '0',
	hideChildrenInMenu: '0',
	hiddenBreadcrumb: '0',
	hiddenHeaderContent: '0',
	publicFlag: '0',
	disabled: '0',
	rollbackFlag: '0',
	logFlag: '1',
	auditFlag: '0',
	param1: '',
	param2: '',
	param3: '',
	param4: '',
	digest: '',
	remarks: '',
	operating: '',
	orderNo: undefined,
	rate: undefined,
	appId: '',
	orgId: '',
	sourceType: '1',
});
const dictFlag = ref([
	{ dictKey: '1', dictValue: '是' },
	{ dictKey: '0', dictValue: '否' },
]);
const dictKeepAlive = ref([
	{ dictKey: '1', dictValue: '缓存' },
	{ dictKey: '0', dictValue: '不缓存' },
]);
const rules = reactive({
	routerKey: [{ required: true, message: '路由标识不能为空', trigger: 'blur' }],
	routerName: [{ required: true, message: '路由名称不能为空', trigger: 'blur' }],
	title: [{ required: true, message: '菜单标题不能为空', trigger: 'blur' }],
	nodeType: [{ required: true, message: '节点类型不能为空', trigger: 'blur' }],
});
const disabledParams = reactive({
	otherUrl: true,
	isLink: false,
	isIframe: false,
});
//获取数据字典
const dictParams = {
	dictFields: 'nodeType,operating,routerSourceType',
};
const dictData = ref({ nodeType: [], operating: [] });
$api.common.getBatchDict.post(dictParams).then((res: any) => {
	dictData.value = res.result;
});
const isLinkChange = (value) => {
	//是否外链触发事件
	if (value === '1') {
		disabledParams.otherUrl = false;
	} else {
		disabledParams.otherUrl = true;
	}
};
const isIframeChange = (value) => {
	//是否内嵌触发事件
	if (value === '1') {
		disabledParams.otherUrl = false;
		disabledParams.isLink = true;
		form.isLink = '1';
	} else {
		disabledParams.otherUrl = true;
		disabledParams.isLink = false;
		form.isLink = '0';
	}
};
const selectRouter = ref({});
const areaCodeSelectTreeData = ref([]);
//初始化
onMounted(() => {
	let routerId = prop.routerInfo?.routerId;
	getAreaCodeData();
	if (routerId) {
		//查询路由信息
		getRouterInfo(routerId);
	}
});
watch(
	() => prop.routerInfo,
	(routerInfo: any) => {
		if (routerInfo.routerId) {
			getRouterInfo(routerInfo.routerId);
		} else {
			let myForm = Object.assign(initForm, routerInfo);
			form = Object.assign(form, myForm);
		}
	},
	{
		deep: true,
	}
);
function getAreaCodeData() {
	setTimeout(() => {
		$api.common.send.post('dict0026', {}).then((res) => {
			areaCodeSelectTreeData.value = res.result;
		});
	}, 20);
}
const getRouterInfo = (routerId) => {
	const routerParams = { routerId: routerId };
	$api.common.send.post('router0002', routerParams).then((res) => {
		form = Object.assign(form, res.result || {});
		selectRouter.value = res.result || {};
		disabledParams.otherUrl = true;
		if (form.isLink === '1') {
			disabledParams.otherUrl = false;
		} else {
			disabledParams.otherUrl = true;
		}
		if (form.isIframe === '1') {
			disabledParams.otherUrl = false;
			disabledParams.isLink = true;
			form.isLink = '1';
		} else {
			disabledParams.isLink = false;
		}
	});
};

//保存数据
const saveForm = async () => {
	//校验表单
	let checkFlag = await formRef.value.checkForm();
	if (checkFlag) {
		//校验通过

		let saveForm = Object.assign({}, form);
		if (saveForm.isIframe === '1') {
			saveForm.nodeType = 'iframe';
		} else {
			if (saveForm.isLink === '1') {
				saveForm.nodeType = 'link';
			}
		}

		if (!saveForm.routerId) {
			let res = await $api.common.send.post('router0004', saveForm);
			res.saveType = 'add';
			return res;
		} else {
			let res = await $api.common.send.post('router0005', saveForm);
			res.saveType = 'edit';
			return res;
		}
	}
	return null;
};
//重置表单
const resetForm = async () => {
	await formRef.value?.resetFields();
};
defineExpose({ saveForm, resetForm, form, selectRouter, getRouterInfo });
</script>
<style lang="scss" scoped></style>
